<template>
  <div class="home-container">
    <!-- 导航栏 -->
    <nav class="nav-bar">
      <div class="logo">
        <img src="@/assets/logo.png" alt="logo" />
        <span>校园心理咨询服务平台</span>
      </div>
      <div class="nav-right">
        <el-button text class="login-btn" @click="router.push('/login')">登录</el-button>
        <el-button type="primary" @click="router.push('/register')">注册</el-button>
      </div>
    </nav>

    <main>
      <!-- 首屏：主标语 -->
      <section class="hero-section">
        <div class="parallax-content">
          <div class="text-content">
            <h1 class="glowing-text">
              <span class="char" v-for="(char, index) in '心灵的港湾'" :key="index" 
                :style="{ animationDelay: `${index * 0.1}s` }">
                {{ char }}
              </span>
            </h1>
            <p class="typing-text animate-text delay-1">在这里，找到内心的平静</p>
            <div class="btn-group animate-text delay-2">
              <el-button type="primary" size="large" class="glow-btn" @click="router.push('/register')">
                开启心理咨询之旅
              </el-button>
            </div>
          </div>
        </div>
      </section>

      <!-- 校园心理健康现状 -->
      <section class="status-section reveal-section">
        <div class="section-content">
          <h2 class="reveal-title">校园心理健康现状</h2>
          <div class="status-cards">
            <div class="status-card reveal-card" v-for="(stat, index) in statistics" :key="index">
              <div class="number gsap-number">{{ stat.number }}</div>
              <div class="label">{{ stat.label }}</div>
              <p class="description">{{ stat.description }}</p>
            </div>
          </div>
        </div>
      </section>

      <!-- 平台价值 -->
      <section class="value-section reveal-section">
        <div class="section-content">
          <h2 class="reveal-title">平台价值</h2>
          <div class="section-desc">
            我们致力于打造一个连接学生与专业心理咨询师的桥梁，
            为学生提供便捷、专业、安全的心理咨询服务。
          </div>
          <div class="value-cards">
            <div class="value-card reveal-card" v-for="(value, index) in values" :key="index">
              <div class="icon-wrapper">
                <el-icon><component :is="value.icon" /></el-icon>
              </div>
              <h3>{{ value.title }}</h3>
              <p>{{ value.description }}</p>
            </div>
          </div>
        </div>
      </section>

      <!-- 服务流程 -->
      <section class="process-section reveal-section">
        <div class="section-content">
          <h2 class="reveal-title">服务流程</h2>
          <div class="process-steps">
            <div class="step reveal-card" v-for="(step, index) in steps" :key="index">
              <div class="step-number">{{ index + 1 }}</div>
              <h3>{{ step.title }}</h3>
              <p>{{ step.description }}</p>
            </div>
          </div>
        </div>
      </section>

      <!-- 平台特色 -->
      <section class="features-section reveal-section">
        <div class="section-content">
          <h2 class="reveal-title">平台特色</h2>
          <div class="features-grid">
            <div class="feature-item reveal-card" v-for="(feature, index) in features" :key="index">
              <el-icon><component :is="feature.icon" /></el-icon>
              <h3>{{ feature.title }}</h3>
              <p>{{ feature.description }}</p>
            </div>
          </div>
        </div>
      </section>
    </main>

    <!-- 返回顶部按钮 -->
    <el-backtop :right="40" :bottom="40" class="custom-backtop">
      <div class="back-to-top">
        <el-icon :size="20"><ArrowUp /></el-icon>
      </div>
    </el-backtop>

    <!-- 页脚 -->
    <footer class="footer">
      <div class="footer-content">
        <div class="footer-section">
          <h4>联系我们</h4>
          <p>邮箱：1456147336@qq.com</p>
          <p>电话：18617388193</p>
        </div>
        <div class="footer-section">
          <h4>关注我们</h4>
          <div class="social-links">
            <a href="#"><el-icon><Message /></el-icon></a>
            <a href="#"><el-icon><ChatDotRound /></el-icon></a>
          </div>
        </div>
      </div>
      <div class="footer-bottom">
        <p>&copy; 2024 校园心理咨询服务平台. All rights reserved.</p>
      </div>
    </footer>
  </div>
</template>

<script setup lang="ts">
import { onMounted, onUnmounted } from 'vue'
import { useRouter } from 'vue-router'
import AOS from 'aos'
import 'aos/dist/aos.css'
import gsap from 'gsap'
import { ScrollTrigger } from 'gsap/ScrollTrigger'
import { TextPlugin } from 'gsap/TextPlugin'
import { 
  Message,
  ChatDotRound,
  ArrowUp} from '@element-plus/icons-vue'
import { initParticles } from '@/utils/particles'
import ScrollReveal from 'scrollreveal'

gsap.registerPlugin(ScrollTrigger, TextPlugin)

const router = useRouter()

// 生命周期钩子
onMounted(() => {
  const cleanup = initParticles('particles-bg')
  onUnmounted(() => {
    if (cleanup) cleanup()
  })

  // 初始化AOS
  AOS.init({
    duration: 1000,
    once: true,
    offset: 100
  })

  // GSAP动画
  // 数字增长动画
  gsap.utils.toArray('.gsap-number').forEach((number: any) => {
    const endValue = parseFloat(number.textContent)
    gsap.fromTo(number,
      { textContent: '0' },
      {
        textContent: endValue,
        duration: 2,
        ease: 'power1.out',
        snap: { textContent: 1 },
        scrollTrigger: {
          trigger: number,
          start: 'top 80%'
        }
      }
    )
  })

  // 文字渐入动画
  gsap.utils.toArray('.section-title').forEach((title: any) => {
    gsap.from(title, {
      opacity: 0,
      y: 50,
      duration: 1,
      scrollTrigger: {
        trigger: title,
        start: 'top 80%',
        toggleActions: 'play none none reverse'
      }
    })
  })

  // 卡片动画
  gsap.utils.toArray('.status-card').forEach((card: any, index: number) => {
    gsap.from(card, {
      opacity: 0,
      y: 100,
      rotation: 5,
      duration: 0.8,
      delay: index * 0.2,
      scrollTrigger: {
        trigger: card,
        start: 'top 80%'
      }
    })

  // 配置 ScrollReveal
  const sr = ScrollReveal({
    distance: '60px',
    duration: 1500,
    delay: 400,
    reset: true
  })

  // 标题动画
  sr.reveal('.reveal-title', {
    origin: 'top',
    interval: 200
  })

  // 卡片动画
  sr.reveal('.reveal-card', {
    origin: 'bottom',
    interval: 200,
    scale: 0.85,
    mobile: false
  })

  // 数字增长动画
  const numberElements = document.querySelectorAll('.number')
  numberElements.forEach(el => {
    const target = parseInt(el.textContent || '0')
    let current = 0
    const increment = target / 50
    const updateNumber = () => {
      if (current < target) {
        current += increment
        el.textContent = Math.round(current) + '%'
        requestAnimationFrame(updateNumber)
      } else {
        el.textContent = target + '%'
      }
    }
    
    const observer = new IntersectionObserver((entries) => {
      entries.forEach(entry => {
        if (entry.isIntersecting) {
          updateNumber()
          observer.unobserve(entry.target)
        }
      })
    })
    
    observer.observe(el)
  })
  })
})

const statistics = [
  {
    number: '35%',
    label: '存在心理困扰',
    description: '超过三分之一的在校大学生正在经历不同程度的心理困扰'
  },
  {
    number: '78%',
    label: '缺乏求助渠道',
    description: '大多数学生虽有求助意愿，但不知道如何寻求专业帮助'
  },
  {
    number: '92%',
    label: '效果显著',
    description: '接受专业心理咨询后的学生心理状况得到明显改善'
  }
]

const values = [
  {
    icon: 'Connection',
    title: '便捷对接',
    description: '打破时空限制，随时随地连接专业心理咨询资源'
  },
  {
    icon: 'Shield',
    title: '专业保障',
    description: '严格筛选的心理咨询师团队，确保服务质量'
  },
  {
    icon: 'Lock',
    title: '隐私保护',
    description: '完善的隐私保护机制，为学生提供安全的倾诉环境'
  }
]

const steps = [
  {
    title: '注册账号',
    description: '简单注册，即可享受平台服务'
  },
  {
    title: '选择咨询师',
    description: '根据专业方向和评价选择合适的咨询师'
  },
  {
    title: '预约时间',
    description: '灵活选择咨询时间，支持线上线下咨询'
  },
  {
    title: '开始咨询',
    description: '专业咨询师帮助你解决心理困扰'
  }
]

const features = [
  {
    icon: 'DataLine',
    title: '数据分析',
    description: '智能分析咨询效果，持续跟踪心理健康状况'
  },
  {
    icon: 'Timer',
    title: '快速响应',
    description: '紧急情况优先处理，确保及时获得帮助'
  },
  {
    icon: 'ChatDotSquare',
    title: '多样化交流',
    description: '支持文字、语音、视频等多种咨询方式'
  },
  {
    icon: 'Document',
    title: '完整档案',
    description: '系统记录咨询过程，助力长期心理健康管理'
  }
]
</script>

<style lang="scss" scoped>
.home-container {
  min-height: 100vh;
  background-color: #fff;

  .nav-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 64px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 48px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    z-index: 1000;

    .logo {
      display: flex;
      align-items: center;
      gap: 12px;

      img {
        height: 36px;
      }

      span {
        font-size: 20px;
        font-weight: 500;
        color: #ff6b6b;
        background: none;
        -webkit-text-fill-color: initial;
      }
    }

    .nav-right {
      display: flex;
      gap: 16px;
    }

    .login-btn {
      background: rgba(255, 107, 107, 0.9);
      color: white;
      border: none;
      
      &:hover {
        background: #ff6b6b;
      }
    }

    .el-button--primary {
      background: #ff6b6b;
      border-color: #ff6b6b;
      
      &:hover {
        background: #ff8585;
        border-color: #ff8585;
      }
    }
  }

  .hero-section {
    height: 100vh;
    background-image: url('@/assets/beach-sunset.png');
    background-size: cover;
    background-position: center;
    position: relative;
    overflow: hidden;

    &::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: linear-gradient(
        rgba(0, 0, 0, 0.3),
        rgba(0, 0, 0, 0.1)
      );
    }

    .parallax-content {
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      text-align: center;
      position: relative;
      padding: 0 20px;

      .text-content {
        h1.glowing-text {
          display: flex;
          justify-content: center;
          gap: 8px;
          
          .char {
            display: inline-block;
            opacity: 0;
            animation: glow-in 0.5s ease forwards;
            text-shadow: 0 0 10px rgba(255, 255, 255, 0.8),
                       0 0 20px rgba(255, 255, 255, 0.5),
                       0 0 30px rgba(255, 107, 107, 0.5);
          }
        }

        .typing-text {
          position: relative;
          &::after {
            content: '|';
            animation: blink 1s infinite;
          }
        }

        .glow-btn {
          position: relative;
          overflow: hidden;
          background: linear-gradient(45deg, #ff8c00, #ff6b6b) !important;
          border: none;
          
          &::before {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: rgba(255, 255, 255, 0.2);
            transform: rotate(45deg);
            animation: btn-shine 3s infinite;
          }
        }
      }
    }
  }

  .status-section {
    padding: 100px 0;
    background: linear-gradient(180deg, #fff5e6 0%, #ffe4d4 100%);
    position: relative;
    &::after, &::before {
      display: none;
      background: linear-gradient(90deg, #ffb88c, #ff8c8c);
    }
    
    .section-content {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 20px;

      .section-desc {
        text-align: center;
        color: #666;
        max-width: 800px;
        margin: 0 auto 40px;
        line-height: 1.6;
      }

      .status-cards {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        gap: 30px;
        
        .status-card {
          background: white;
          padding: 30px;
          border-radius: 15px;
          box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
          text-align: center;
          transition: transform 0.3s;
          
          &:hover {
            transform: translateY(-10px);
          }
          
          .number {
            font-size: 48px;
            font-weight: bold;
            color: #ff8c00;
          }
          
          .label {
            font-size: 20px;
            margin: 10px 0;
            color: #2c3e50;
          }
          
          .description {
            color: #666;
            line-height: 1.6;
          }
        }
      }
    }
  }

  .value-section {
    background: linear-gradient(180deg, #ffe4d4 0%, #ffd8cd 100%);
    padding: 80px 0;
    position: relative;
    &::after, &::before {
      display: none;
      background: linear-gradient(90deg, #ffd8a8, #ffb88c);
    }

    .section-content {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 20px;

      .section-desc {
        text-align: center;
        color: #666;
        max-width: 800px;
        margin: 0 auto 40px;
        line-height: 1.6;
      }

      .value-cards {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 30px;
        
        .value-card {
          background: white;
          padding: 30px;
          border-radius: 15px;
          text-align: center;
          transition: all 0.3s;
          
          &:hover {
            transform: translateY(-10px);
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
          }
          
          .icon-wrapper {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            background: #ff8c00;
            color: white;
            margin: 0 auto 20px;
            display: flex;
            align-items: center;
            justify-content: center;
          }
          
          h3 {
            font-size: 24px;
            margin-bottom: 15px;
            color: #2c3e50;
          }
          
          p {
            color: #666;
            line-height: 1.6;
          }
        }
      }
    }
  }

  .process-section {
    background: linear-gradient(180deg, #ffd8cd 0%, #ffecd2 100%);
    padding: 80px 0;
    position: relative;
    &::after, &::before {
      display: none;
      background: linear-gradient(90deg, #ffb88c, #ff9b9b);
    }

    .section-content {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 20px;

      .process-steps {
        display: flex;
        justify-content: space-between;
        gap: 30px;
        margin-top: 40px;

        .step {
          flex: 1;
          text-align: center;
          position: relative;

          &:not(:last-child)::after {
            content: '';
            position: absolute;
            top: 30px;
            right: -15px;
            width: 30px;
            height: 2px;
            background: #ff8c00;
          }

          .step-number {
            width: 60px;
            height: 60px;
            line-height: 60px;
            border-radius: 50%;
            background: #ff8c00;
            color: white;
            font-size: 24px;
            margin: 0 auto 20px;
          }

          h3 {
            margin-bottom: 10px;
            color: #2c3e50;
          }

          p {
            color: #666;
            line-height: 1.6;
          }
        }
      }
    }
  }

  .features-section {
    padding: 100px 48px;
    background: linear-gradient(135deg, #ffecd2, #fcb69f);

    .section-content {
      max-width: 1200px;
      margin: 0 auto;

      h2 {
        text-align: center;
        font-size: 36px;
        margin-bottom: 60px;
        color: #2d3436;
      }

      .features-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 32px;

        .feature-item {
          display: flex;
          gap: 20px;
          padding: 24px;
          background: rgba(255, 255, 255, 0.95);
          border-radius: 12px;
          transition: transform 0.3s;

          &:hover {
            transform: translateY(-5px);
          }

          .el-icon {
            color: #ff8c00;
          }

          h3 {
            font-size: 20px;
            margin-bottom: 8px;
            color: #2d3436;
          }

          p {
            color: #636e72;
            line-height: 1.6;
          }
        }
      }
    }
  }

  .footer {
    background: #2d3436;
    color: white;
    padding: 60px 48px 24px;

    .footer-content {
      max-width: 1200px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: 40px;
      margin-bottom: 40px;

      .footer-section {
        h4 {
          font-size: 18px;
          margin-bottom: 20px;
        }

        p {
          color: #b2bec3;
          margin-bottom: 8px;
        }

        .social-links {
          display: flex;
          gap: 16px;

          a {
            color: #b2bec3;
            transition: color 0.3s;

            &:hover {
              color: #ff8c00;
            }
          }
        }
      }
    }

    .footer-bottom {
      text-align: center;
      padding-top: 24px;
      border-top: 1px solid rgba(255, 255, 255, 0.1);

      p {
        color: #b2bec3;
        font-size: 14px;
      }
    }
  }

  .particles-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none; // 允许点击穿透
  }

  .custom-backtop {
    .back-to-top {
      height: 100%;
      width: 100%;
      background-color: var(--el-color-primary);
      box-shadow: 0 0 6px rgba(0, 0, 0, 0.12);
      text-align: center;
      line-height: 40px;
      color: #fff;
      transition: all 0.3s;
      
      &:hover {
        background-color: var(--el-color-primary-light-3);
        transform: translateY(-2px);
      }
    }
  }

  .section-title {
    opacity: 0;
    transform: translateY(30px);
  }

  .status-card,
  .value-card,
  .feature-item {
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 15px rgba(255, 140, 0, 0.1);
    
    &:hover {
      transform: translateY(-10px) scale(1.02);
      box-shadow: 0 20px 40px rgba(255, 140, 0, 0.15);
    }

    .number {
      display: inline-block;
      transition: transform 0.5s;
      
      &:hover {
        transform: scale(1.2);
      }
    }
  }

  // 3D效果
  .feature-item {
    transform-style: preserve-3d;
    perspective: 1000px;
    
    &:hover {
      transform: rotateX(10deg) rotateY(10deg) translateZ(20px);
      
      .el-icon {
        transform: translateZ(30px) rotate(360deg);
      }
      
      h3 {
        transform: translateZ(25px);
      }
      
      p {
        transform: translateZ(20px);
      }
    }
    
    .el-icon {
      transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    }

    h3, p {
      transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    }
  }

  // 移除重复的动画定义
  @keyframes scaleIn {
    from {
      opacity: 0;
      transform: scale3d(0.8, 0.8, 1);
    }
    to {
      opacity: 1;
      transform: scale3d(1, 1, 1);
    }
  }

  // 移除重复的section样式
  .status-section,
  .value-section,
  .process-section,
  .features-section {
    &::after, &::before {
      display: none;
    }
  }

  // 统一卡片样式
  .status-cards .status-card,
  .value-cards .value-card,
  .process-steps .step,
  .features-grid .feature-item {
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 4px 15px rgba(255, 140, 0, 0.1);
    border-radius: 12px;
    transition: all 0.3s ease;
    
    &:hover {
      transform: translateY(-5px);
      box-shadow: 0 8px 25px rgba(255, 140, 0, 0.15);
    }
  }

  // 渐变背景动画
  .section-content {
    position: relative;
    overflow: hidden;
    
    &::before {
      content: '';
      position: absolute;
      top: -50%;
      left: -50%;
      width: 200%;
      height: 200%;
      background: linear-gradient(
        45deg,
        rgba(255, 140, 0, 0.1),
        rgba(255, 107, 107, 0.1),
        rgba(255, 140, 0, 0.1)
      );
      animation: gradientBG 8s ease infinite;
      z-index: -1;
    }
  }

  @keyframes gradientBG {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }
}

@keyframes glow-in {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

@keyframes btn-shine {
  0% {
    left: -50%;
  }
  100% {
    left: 100%;
  }
}

@keyframes float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-20px);
  }
}

@keyframes floatUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale3d(0.8, 0.8, 1);
  }
  to {
    opacity: 1;
    transform: scale3d(1, 1, 1);
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translate3d(0, 40px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fadeInScale {
  from {
    opacity: 0;
    transform: scale3d(0.8, 0.8, 1);
  }
  to {
    opacity: 1;
    transform: scale3d(1, 1, 1);
  }
}

.status-section {
  .status-card {
    animation: fadeInUp 0.8s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    opacity: 0;
    
    @for $i from 1 through 3 {
      &:nth-child(#{$i}) {
        animation-delay: #{$i * 0.2}s;
      }
    }
  }
}

.value-section {
  .value-card {
    animation: fadeInScale 0.8s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    opacity: 0;
    
    @for $i from 1 through 3 {
      &:nth-child(#{$i}) {
        animation-delay: #{$i * 0.2}s;
      }
    }
  }
}

.feature-item {
  transform-style: preserve-3d;
  perspective: 1000px;
  
  &:hover {
    transform: rotateX(10deg) rotateY(10deg) translateZ(20px);
    
    .el-icon {
      transform: translateZ(30px) rotate(360deg);
    }
    
    h3 {
      transform: translateZ(25px);
    }
    
    p {
      transform: translateZ(20px);
    }
  }
  
  .el-icon {
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  }

  h3, p {
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  }
}

.section-content {
  position: relative;
  overflow: hidden;
  
  &::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(
      45deg,
      rgba(255, 140, 0, 0.1),
      rgba(255, 107, 107, 0.1),
      rgba(255, 140, 0, 0.1)
    );
    animation: gradientBG 8s ease infinite;
    z-index: -1;
  }
}

@keyframes gradientBG {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@media (max-width: 768px) {
  .home-container {
    .hero-section {
      .text-content {
        h1 {
          font-size: 40px;
        }
        p {
          font-size: 18px;
        }
      }
    }
  }
}

.status-section,
.value-section,
.process-section,
.features-section {
  &::after, &::before {
    display: none;
  }
}

.status-cards .status-card,
.value-cards .value-card,
.process-steps .step,
.features-grid .feature-item {
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 4px 15px rgba(255, 140, 0, 0.1);
  border-radius: 12px;
  transition: all 0.3s ease;
  
  &:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(255, 140, 0, 0.15);
  }
}
</style> 
